<template>
    <view class="m-category">
        <m-hot-search></m-hot-search>
        <m-sidebar-tab
            v-if="categorys"
            class="m-category-sidebar"
            :menus="categorys"
            :height="`${height}rpx`"
        ></m-sidebar-tab>
    </view>
</template>

<script setup lang="ts">
import { shallowRef, ref } from 'vue'
import { getCategoryList } from '@/api/product'
import MSidebarTab from '@/components/common/MSidebarTab.vue'
import MHotSearch from '@/components/business/MHotSearch.vue'
import { onReady } from '@dcloudio/uni-app'
const categorys = shallowRef<Array<Category>>()
getCategoryList().then((v) => {
    categorys.value = v.data
})
const height = ref(750)
onReady(() => {
    let systemInfo = uni.getSystemInfoSync()
    // 获取视窗高度
    let windowHeight = systemInfo.windowHeight
    let bottomheight = systemInfo.windowBottom
    let query = uni.createSelectorQuery()
    // 选择节点
    query
        .select('.m-search-bar')
        .boundingClientRect((data: any) => {
            height.value = windowHeight - data.height
        })
        .exec()
})
</script>

<style lang="scss" scoped>
.m-category {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: calc(100vh - var(--window-bottom));
}
.m-category-sidebar {
    flex-grow: 1;
}
.m-bottom-helper {
    height: var(--window-bottom);
}
</style>
